<style scoped>
.styleDetail {
  margin-right: 0.5vw;
  padding: 0 15px;
  background-color: white;
  height: 95vh;
  position: relative;
}
.top_msg {
  padding: 1.5vh 0;
  border-bottom: 2px solid #f4f4f4;
  white-space: nowrap;
}
.top_msg p {
  display: inline-block;
  text-align: right;
  line-height: 30px;
  margin-right: 10px;
}
.footView span {
  float: left;
  margin-right: 48px;
  line-height: 6vh;
  font-size: 14px;
}
.footView span i {
  margin-right: 5px;
}
.btns {
  width: 100%;
  margin: 1.5vh 0;
}
</style>

<style>
.styleDetail .el-input__icon {
  line-height: 22px;
}
.styleDetail .c_b .el-button {
  padding: 0;
}
.styleDetail .top_msg .el-date-editor.el-input__inner {
  width: 370px;
  height: 30px;
}
.styleDetail .el-date-editor .el-range-separator {
  line-height: 22px;
  width: 10%;
}

.styleDetail .el-input__inner,
.styleDetail .el-input {
  height: 30px;
  width: 160px;
}
</style>

<template>
  <div class="styleDetail">
    <div class="top_msg">
      <p>款号</p>
      <el-input
        v-model="styleNo"
        style="margin-right: 10px"
        @input="styleNumberInputChange"
      ></el-input>

      <p>日期</p>
      <el-date-picker
        clearable
        unlink-panels
        value-format="yyyy-MM-dd"
        v-model="dateList"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>

    <div class="btns">
      <el-button icon="el-icon-search" type="primary" @click="search"
        >查询</el-button
      >
      <el-button icon="el-icon-upload2" @click="outPut()">导出</el-button>
    </div>

    <el-table
      id="outTable"
      :data="tableData"
      style="width: 100%"
      height="75vh"
      highlight-current-row
      show-summary
      :summary-method="getSummaries"
      ref="table"
      :header-cell-style="{ background: '#f4f4f4', padding: 0, height: '40px' }"
      :cell-style="{ padding: 0, height: '36px' }"
    >
      <el-table-column prop="sequence" label="单据号" width="180">
      </el-table-column>
      <el-table-column prop="time" label="日期"> </el-table-column>
      <el-table-column prop="type" label="类型"> </el-table-column>
      <el-table-column prop="styleNumber" label="款号"> </el-table-column>
      <el-table-column prop="color" label="颜色"> </el-table-column>
      <el-table-column prop="size" label="尺寸"> </el-table-column>
      <el-table-column prop="number" label="数量"> </el-table-column>
    </el-table>

    <foot-view class="footView">
      <div slot="text">
        <span>数据库：{{ jxQuarter }}</span>
      </div>
    </foot-view>
  </div>
</template>

<script>
import { getStyleNumberInfo } from '../../../network/manufacturer'

import footView from '../../../components/FootView'

import today from '../../../components/mixins/today'
import enterUp from '../../../components/mixins/enterUp'

import XLSX from 'xlsx'
import FileSaver from 'file-saver'

export default {
  name: 'style_detail',
  mixins: [today, enterUp],
  created() {
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null
    this.inpList = this.getInput()
  },
  data() {
    return {
      inpList: [],
      styleNo: '',
      dateList: [this.searchDate(7), this.searchDate()],
      tableData: [],
      jxQuarter: null,
      // jxQuarter: document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))[1]
    }
  },
  watch: {},
  components: {
    footView
  },
  methods: {
    // 款号大写
    styleNumberInputChange(val) {
      this.styleNo = val.toUpperCase()
    },
    search() {
      getStyleNumberInfo({
        styleNumber: this.styleNo,
        startDate: this.dateList ? this.dateList[0] + ' 00:00:00' : '',
        endDate: this.dateList ? this.dateList[1] + ' 23:59:59' : ''
      }).then((res) => {
        this.tableData = res.data.data || []
        this.tableData.forEach((e) => {
          e.color = e.colorNo + '.' + e.colorName
          e.time = e.enteringTime.slice(0, 10)
          switch (e.infoType) {
            case 0:
              e.type = '厂进'
              break
            case 1:
              e.type = '厂退'
              break
            case 2:
              e.type = '客进'
              break
            case 3:
              e.type = '客退'
              break
            case 4:
              e.type = '客销'
              break
            default:
              break
          }
        })
        this.$nextTick(() => {
          this.$refs.table.doLayout()
        })
      })
    },
    // 导出为excel表格的方法 import FileSaver from "file-saver"; import XLSX from "xlsx";

    outPut() {
      let xlsxParam = { raw: true } //转换成excel时，使用原始的格式
      let wb = XLSX.utils.table_to_book(
        document.querySelector('#outTable'),
        xlsxParam
      )
      let wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream;charset=utf-8' }),
          '款号明细记录.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    },

    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const prop = column.property
        const values = data.map((item) => Number(item[prop]))
        if (!values.every((value) => isNaN(value))) {
          if (prop == 'number') {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            if (!sums[index]) {
              sums[index] = ''
            }
            let decimal = sums[index].toString().split('.')[1]
            if (decimal && decimal.length > 2) {
              sums[index] = sums[index].toFixed(2)
            }
          }
        }
      })
      // console.log(sums)
      this.summation = sums
      return sums
    }
  }
}
</script>
